<template>
  <div>
    <LoadingIcon v-if="loading"></LoadingIcon>

    <div v-else>
      <b-form @submit="onSubmit">
        <b-form-group 
          id="input-group-number-of-questions"
          label="选择答题数量："
          label-for="input-number-of-questions"
          class="text-left"
        >
          <b-form-input
            id="input-number-of-questions"
            v-model="form.number"
            type="number"
            :min="minQuestions"
            :max="maxQuestions"
            required 
            :placeholder="`在 ${minQuestions} 和 ${maxQuestions} 之内`"
          ></b-form-input>
        </b-form-group>

        <b-form-group id="input-group-category">
          <b-form-select
            id="input-category"
            v-model="form.category"
            :options="categories"
          ></b-form-select>
        </b-form-group>

        <b-form-group id="input-group-difficulty">
          <b-form-select
            id="input-difficulty"
            v-model="form.difficulty"
            :options="difficulties"
          ></b-form-select>
        </b-form-group>

        <b-form-group id="input-group-type">
          <b-form-select
            id="input-type"
            v-model="form.type"
            :options="types"
          ></b-form-select>
        </b-form-group>

        <b-button type="submit" class="custom-success">开始答题</b-button>
      </b-form>
    </div>
  </div>
</template>
<script src="//imgcache.qq.com/qcloud/tcbjs/1.9.0/tcb.js"></script>
<script>
import LoadingIcon from './LoadingIcon'


export default {
  components: {
    LoadingIcon
  },
  data() {
    return {
      // Form data, tied to respective inputs
      form: {
        number: '',
        category: '',
        difficulty: '',
        type: ''
      },
      // Used for form dropdowns and number input
      categories: [{ text: '知识点', value: '' }],
      difficulties: [{ text: '难度', value: '' }, '简单', '中等', '困难'],
      types: [
        { text: '类型', value: '' }, 
        { text: '选择题', value: '选择题' }, 
        { text: '判断题', value: '判断题'},
        { text: '多选题', value: '多选题'}
      ],
      minQuestions: 20,
      maxQuestions: 30,
      // Used for displaying ajax loading animation OR form
      loading: true
    }
  },
  created() {
    this.fetchCategories()
  },
  methods: {
    async fetchCategories() {
      //登录
      await this.$tcb.auth({ persistence: "local" }).anonymousAuthProvider().signIn()
      const db = this.$tcb.database()
      //const db = this.$root.$data.db
      await db.collection("basic").where({name:'category'}).get().then(res=>{res.data[0].value.forEach(category=>{
        this.categories.push({text: category, value: category})
      })
        this.loading = false;
      })

      /*
      axios.get('https://opentdb.com/api_category.php')
      .then(resp => resp.data)
      .then(resp => {
        resp.trivia_categories.forEach(category => {
          this.categories.push({text: category.name, value: `${category.id}`})
        });
        this.loading = false;
      })
      */
    },
    onSubmit(evt) {
      evt.preventDefault()
       /** Triggered on form submit. Passes form data
        * @event form-submitted
        * @type {number|string}
        * @property {object}
        */
      this.$emit('form-submitted', this.form)
    }
  }
}
</script>

